<template>
  <page-loading :show="pageLoading">
    <!-- 选择订单类型 -->
    <view class="select-order-type">
      <!-- 车辆信息 -->
      <car-info-header></car-info-header>

      <!-- 选择订单类型 -->
      <view class="select-box">
        <view class="type-box">
          <view class="title">选择订单类型</view>

          <view class="list flex flex-wrap-w">
            <view
              v-for="item in typeList"
              :key="item.text"
              class="item flex flex-dir-c flex-ai-c"
              hover-class="bg-color"
              @click="goPage(item.url)"
            >
              <i-icon
                :icon="item.icon"
                type="m"
                size="80rpx"
                class="icon-boxss"
              ></i-icon>
              <text>{{ item.text }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </page-loading>
</template>

<script>
import carInfoHeader from '@/components/afterSales/carInfoHeader.vue'

export default {
  components: {
    carInfoHeader,
  },

  data() {
    return {
      typeList: [
        {
          icon: 'iconbaoyangdd',
          text: '保养订单',
          url: 'selectServe/selectServe?index=2',
        },
        {
          icon: 'iconxichedd',
          text: '洗车订单',
          url: 'selectServe/selectServe?index=0',
        },
        {
          icon: 'iconmeirongdd',
          text: '美容订单',
          url: 'selectServe/selectServe?index=1',
        },
        // {
        //   icon: 'iconluntaidd',
        //   text: '轮胎订单',
        //   url: 'tyre/selectTyre'
        // },
        // {
        //   icon: 'iconquanchejiandd',
        //   text: '全车件适配',
        //   url: 'selectCategory/selectCategory'
        // },
      ],
      pageLoading: false, //初始化加载效果
    }
  },

  onLoad() {
    this.$nextTick(() => {
      this.pageLoading = true
    })
  },

  methods: {
    // 跳转对应的页面
    goPage(url) {
      uni.navigateTo({
        url: `/pages_afterSales/${url}`,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.select-order-type {
  background: #f4f4f4;
  /* #ifdef H5 */
  min-height: calc(100vh - 88rpx);
  /* #endif */

  /* #ifdef APP-PLUS */
  min-height: 100vh;
  /* #endif */
}

.select-box {
  padding: 24rpx;
}

.type-box {
  padding: 0 24rpx;
  background-color: #fff;
  border-radius: 10rpx;

  .title {
    padding: 30rpx 0;
    font-size: 30rpx;
    color: #333;
  }

  .list {
    .item {
      width: 25%;
      padding: 25rpx 0;

      text {
        margin-top: 24rpx;
        font-size: 26rpx;
        font-weight: 500;
        color: #666666;
      }
    }
  }
}

// 图标加阴影
.icon-boxss {
  border-radius: 50%;
  box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.09);
}

.bg-color {
  background: rgba(0, 0, 0, 0.1);
}
</style>
